<template>
  <div class="left-box">
    <el-input v-model="filterText" placeholder="请输入部门名称" />
    <el-scrollbar height="100%">
      <el-tree
        ref="treeRef"
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
      />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  nextTick,
  getCurrentInstance,
} from 'vue'
import type { PropType } from 'vue'

import { ElTree } from 'element-plus'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

interface Tree {
  [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}
const data: Tree[] = [
  {
    label: '树懒科技',
    children: [
      {
        label: '研发部',
      },
      {
        label: '技术部',
      },
      {
        label: '测试部',
      },
      {
        label: '销售部',
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>
<style lang="scss" scoped>
.left-box {
  width: 97%;
  height: 100%;
  background-color: var(--el-bg-color);
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
